<template>
  <div class="todoapp">
    <todo-header @add="add" :list="list" @check="check" />
    <todo-main :list="newList" @del="del" />
    <todo-footer :list="list" @change="change" @clear="clear" />
  </div>
</template>
  
<script>
import TodoHeader from './components/TodoHeader.vue';
import TodoMain from './components/TodoMain.vue';
import TodoFooter from './components/TodoFooter.vue';
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  methods: {
    del(id) {
      this.list = this.list.filter(v => v.id != id)
    },
    add(name) {
      this.list.push({ id: Date.now(), name: name, isDone: false })
    },
    // change(status) {
    //   if (status == '未完成') {
    //     return this.newList = this.list.filter(v => v.isDone == false)
    //   } else if (status == '已完成') {
    //     return this.newList = this.list.filter(v => v.isDone)
    //   } else {
    //     return this.newList = this.list
    //   }
    // }
    change(status) {
      this.status = status
    },
    clear() {
      this.list = this.list.filter(v => !v.isDone)
    },
    check(val) {
      this.list.forEach(v => v.isDone = val)
    }
  },

  computed: {
    newList() {
      if (this.status == '未完成') {
        return this.list.filter(v => !v.isDone)
      } else if (this.status == '已完成') {
        return this.list.filter(v => v.isDone)
      } else {
        return this.list
      }
    }
  },
  watch: {
    list: {
      deep: true,
      handler() {
        localStorage.setItem('new', JSON.stringify(this.list))
      }

    }
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem('new')) || [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
      status: '全部',
      // newList: []

    };
  }
}
</script>
  
<style></style>
  